'use client';

import React, { useEffect, useRef } from 'react';
import { useTheme } from '../context/ThemeContext';

// 粒子背景配置
interface ParticleConfig {
  x: number;
  y: number;
  size: number;
  speedX: number;
  speedY: number;
  color: string;
}

export default function AnimatedBackground() {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const { themeColor } = useTheme();
  
  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    if (!ctx) return;
    
    // 设置canvas尺寸为父容器大小
    const resize = () => {
      const parent = canvas.parentElement;
      if (parent) {
        canvas.width = parent.offsetWidth;
        canvas.height = parent.offsetHeight;
      }
    };
    
    window.addEventListener('resize', resize);
    resize();
    
    // 主题色获取
    const getThemeColor = () => {
      // 使用当前主题的primary-400颜色
      const style = getComputedStyle(document.documentElement);
      return style.getPropertyValue('--color-primary-400') || '#fb923c';
    };
    
    // 创建粒子数组
    const particleCount = 50;
    const particles: ParticleConfig[] = [];
    
    for (let i = 0; i < particleCount; i++) {
      particles.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        size: Math.random() * 2 + 0.5,
        speedX: (Math.random() - 0.5) * 0.5,
        speedY: (Math.random() - 0.5) * 0.5,
        color: getThemeColor()
      });
    }
    
    // 绘制线条连接粒子
    const drawLines = (particle: ParticleConfig, particles: ParticleConfig[]) => {
      for (const otherParticle of particles) {
        const distance = Math.sqrt(
          Math.pow(particle.x - otherParticle.x, 2) + 
          Math.pow(particle.y - otherParticle.y, 2)
        );
        
        if (distance < 100) {
          ctx.beginPath();
          ctx.strokeStyle = `rgba(${parseInt(particle.color.slice(1, 3), 16)}, ${parseInt(particle.color.slice(3, 5), 16)}, ${parseInt(particle.color.slice(5, 7), 16)}, ${0.2 - distance / 500})`;
          ctx.lineWidth = 0.5;
          ctx.moveTo(particle.x, particle.y);
          ctx.lineTo(otherParticle.x, otherParticle.y);
          ctx.stroke();
        }
      }
    };
    
    // 动画循环
    const animate = () => {
      requestAnimationFrame(animate);
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      // 更新颜色（当主题变化时）
      const currentColor = getThemeColor();
      
      // 更新和绘制粒子
      particles.forEach(particle => {
        // 更新粒子位置
        particle.x += particle.speedX;
        particle.y += particle.speedY;
        
        // 边界检查
        if (particle.x > canvas.width || particle.x < 0) {
          particle.speedX = -particle.speedX;
        }
        
        if (particle.y > canvas.height || particle.y < 0) {
          particle.speedY = -particle.speedY;
        }
        
        // 更新颜色
        particle.color = currentColor;
        
        // 绘制粒子
        ctx.beginPath();
        ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
        ctx.fillStyle = particle.color;
        ctx.fill();
        
        // 绘制连接线
        drawLines(particle, particles);
      });
    };
    
    // 启动动画
    animate();
    
    // 清理
    return () => {
      window.removeEventListener('resize', resize);
    };
  }, [themeColor]);
  
  return (
    <canvas 
      ref={canvasRef} 
      className="absolute inset-0 z-0 opacity-20" 
    />
  );
} 